<template>
  <div style="display: inline-block" class="chooseshopbtn">
    <el-button :size="size" :type="type" @click="open">{{btnText}}</el-button>
    <el-dialog title="选择店铺" :visible.sync="dialogVisible" :append-to-body="nested" width="60%">
      <el-form :model="form" :inline="true" ref="form">
        <el-row>
          <el-form-item label="店铺名称" prop="shop_name">
            <el-input v-model.trim="form.name"></el-input>
          </el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-row>
      </el-form>
      <el-row class="content">
        <el-table class="shop_list" :data="list" border align="center" row-key="index">
          <el-table-column label="" width="30">
            <template slot-scope="scope">
              <el-radio :label="scope.$index" v-model="chooseIndex">&nbsp;</el-radio>
            </template>
          </el-table-column>
          <!--  单元格内容 -->
          <slot>
            <!-- 默认的内容 -->
            <el-table-column align="center" label="店铺名称" prop="name"></el-table-column>
            <el-table-column align="center" label="店铺类型" prop="type">
              <template slot-scope="scope">
                {{{
                1: '品牌旗舰店',
                2: '品牌专卖店',
                3: '类目专营店',
                4: '多品类店',
                5: '全品类全品牌店'
                }[scope.row.type]}}
              </template>
            </el-table-column>
            <el-table-column align="center" label="店铺性质" prop="attr">
              <template slot-scope="scope">
                {{{
                1: '泰然易购',
                2: '小泰良品',
                3: '企业购',
                4: '小泰萌宠'
                }[scope.row.attr]}}
              </template>
            </el-table-column>
          </slot>
        </el-table>
        <pagination-view  :pagesize="pageInfo.pageSize"
          :total="total"
          :currentPage="page"
          :pagesize="page_size"
          @size-change="handleSizeChange"
          @current-change="handleNumberChange">
        </pagination-view>
      </el-row>
      <el-row style="text-align: center">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import PaginationView from '@/components/PaginationView'
  import request from '@/utils/request'
import {encodeParams} from '@/utils'

  export default {
    name: "chooseShopBtn",
    props: {
      type: {          // btn type
        type: String,
        default: 'primary'
      },
      pageSize: {          // btn size
        type: String,
        default: 'small'
      },
      btnText: {
        type: String,
        default: '选择店铺'
      },
      choose: Function,  // 点击确定后的回调函数
      shopApi:{          // 店铺列表接口
        type: String,
        default: '/api/shop/getShopList'
      },
      nested: {       // 是否有嵌套的弹窗
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        dialogVisible: false,
        form: {
          name: ''
        },
        list: [], // 店铺列表数据
        chooseIndex: '', // 选择的店铺
        total:0,
        page: 1,
        page_size: 20
      }
    },
    methods: {
      initData() { //  初始化数据
        this.$set(this.form, 'name', '')
        this.list = []
        this.chooseIndex = ''
        this.total = 0
        this.page = 1
        this.page_size = 20
      },
      open() {
        this.chooseIndex = ''
        Object.keys(this.form).forEach((k,i) => {
          this.$set(this.form, k, '')
        })
        this.initData()
        this.getShopList('', 1, '')
        this.dialogVisible = true
      },
      close() {
        this.dialogVisible = false
      },
      search() {  // 搜素
        this.getShopList('', 1)
      },
      save() {
        if( this.chooseIndex || this.chooseIndex === 0) {
          const shop = this.list[this.chooseIndex] // 选中的店铺
          this.choose && this.choose(shop)
          this.dialogVisible = false
        } else {
          this.$message({
            type: 'info',
            message: '请选择店铺'
          })
        }
      },
      // 分页
      handleSizeChange(val) {
        this.getShopList('', '', val)
      },
      handleNumberChange(val) {
        this.getShopList('', val, '')
      },
      getShopList(params, page, page_size) {
        this.page = page || this.page
        this.page_size = page_size || this.page_size
        const _params = Object.assign({}, this.form, {
          page: this.page,
          page_size: this.page_size
        }, params)
        this.chooseIndex = ''
        this.request(_params).then(res => {
          this.list = res.data && res.data.list ? res.data.list: []
          this.total = res.data && res.data.total ? res.data.total: 0
        })
      },
      request(params) { //获取店铺列表
        return request({
          url: this.shopApi,
          method: 'GET',
          params: params
        })
      }
    },
    components: {
      PaginationView
    }
  }
</script>

<style lang="scss">
  .chooseshopbtn {
    .el-dialog__wrapper{
      .el-dialog{
        margin-top: 5vh;
        .el-dialog__header{
          padding: 0 10px;
        }
        .el-dialog__body{
          padding: 10px 20px;
          .content{
            .el-table__body-wrapper{
              height: 30vh;
              overflow-y: auto;
            }

          }
        }
      }
    }
  }

</style>
